<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body { margin: 0; padding: 0;}
        .container { border: 1px solid blue ;}
        .container>div {
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 100px;
        }
        .container>div:nth-child(2n) {
            background: #dfdfdf;
        }
        .container>div:nth-child(2n+1) {
            background: #ffff00;
        }
    </style>
</head>
<body>

    <div class="container" onclick="myScroll()"></div>

    <script type="text/javascript">
        const c = document.querySelector( '.container' );
        for( let i = 1 ; i <= 50 ; i++ ){
            // 使用 document 提供的支持创建一个新的 HTML 元素
            let node = document.createElement( 'div' );
            node.innerHTML = i ;
            // 将新元素添加到指定元素内部的末尾
            c.appendChild( node );
        }

        function myScroll(){
            // scrollBy( x , y )
            // window.scrollBy( 0 , -10 );
            // scrollTo( x , y )
            window.scrollTo( 0 , 2000 );
        }

        console.log( window.scrollY );
        console.log( window.innerHeight );

    </script>
</body>
</html>